<template>
  <el-dialog :id="`order-${order.orderId}`" :title="order.isNew ? '新增凭证' : '更换凭证'" v-model="visible" width="420px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
    <div class="proof">
      <div class="info">
        <p>
          收款人<span class="text">{{ order.supplierName }}</span>
        </p>
        <p>
          收款账户<span class="text">{{ order.bankAccount }}</span>
        </p>
        <p>
          收款银行<span class="text">{{ order.depositBank }}</span>
        </p>
      </div>
      <div class="upload-img">
        <el-upload ref="uploadRef" :show-file-list="false" accept=".png,.jpg,.jpeg" :action="action" :headers="headers" list-type="picture-card" :on-success="onUploadSuccess" :before-upload="onBeforeUpload" :on-change="onUploadChange">
          <div :class="{ upload: imageUrl }" v-if="imageUrl">
            <img :src="imageUrl" />
            <div class="again" scope.slot="tip">重新上传</div>
          </div>
          <div v-else class="noImg">
            <el-icon class="icon"><Plus /></el-icon>
            <div class="tip" scope.slot="tip">点击上传</div>
          </div>
        </el-upload>

        <p class="img-tip">只能上传jpg/png文件，且不超过10MB</p>
      </div>
      <div class="btns">
        <Button class="is-plain" label="取消" @click="onCancelClick" />
        <Button label="确认" type="warning" @click="onSubmitClick" />
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import api from '@/api'
import { apiBasePath } from '@/api/config'
import Button from '@/components/button/button.vue'
import addWaterMarker from '@/assets/js/waterMarker'

const props = defineProps(['visible', 'order'])
const emit = defineEmits(['update:visible', 'change'])

const uploadRef = ref()
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(visible, (val) => {
  if (val) {
    addWaterMarker(`order-${props.order.orderId}`, '耶购电子商务')
  }
})

const action = apiBasePath + `/medinstrument/site/uploadSingleFile`

const headers = {
  Authorization: 'Bearer ' + localStorage.getItem('_site_token')
}

const fileList = ref([])
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageUrl = ref('')

watch(
  () => props.order,
  (val) => {
    if (val) {
      imageUrl.value = val.isNew ? '' : val.payProof
    }
  }
)

const onBeforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过10MB!')
  }
  return isJPG && isLt1M
}

const onUploadSuccess = (file) => {
  imageUrl.value = file.data
}

const onUploadChange = (file) => {
  if (file.response) {
    imageUrl.value = file.response.data
  }
}

const onCancelClick = () => {
  imageUrl.value = ''
  visible.value = false
}

const onSubmitClick = () => {
  let imgs = fileList.value
    .filter((e) => e.status === 'success')
    .map((e) => {
      if (e.response) {
        return e.response.data
      } else {
        return e.url
      }
    })
    .join(',')
  emit('change', imageUrl.value)
  visible.value = false
  imageUrl.value = ''
}

// const onCloseDialog = () => {
//   uploadRef.value.clearFiles()
//   imageUrl.value = ''
// }
</script>

<style scoped lang="scss">
.proof {
  padding: 10px 30px 40px 30px;
  display: flex;
  flex-direction: column;

  .info {
    border-bottom: 1px solid var(--border-color);

    p {
      margin-bottom: 30px;
      line-height: 20px;

      .text {
        display: inline-block;
        margin-left: 44px;
        font-weight: 500;
      }
    }
  }

  .upload-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 32px 0 20px 0;

    .img-tip {
      font-size: 12px;
      color: var(--span-color-text);
      height: 16px;
      margin-top: 12px;
    }
  }

  .upload {
    width: 100%;
    height: 100%;
    position: relative;

    .again {
      position: absolute;
      left: 50%;
      top: 50%;
      color: #fff;
      font-size: 12px;
      width: 48px;
      line-height: 14px;
      transform: translate(-50%, -50%);
    }
  }

  .upload::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
  }

  .btns {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
